<template>
  <div class="app-container">
    <el-form label-width="80px">
      <div class="box">
        <div class="box_content">
          <el-form-item label="学期">
            <el-select value="" placeholder="全部">
              <el-option v-for="item in querySemester" :label="item.semester_name" :value="item.unid"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="box_content">
          <el-form-item label="课程搜索">
            <el-select value="" placeholder="全部">
              <el-option v-for="item in queryLession" :label="item.lession_name" :value="item.unid"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="box_content">
          <el-form-item label="副跟进人">
            <el-select value="" placeholder="全部">
              <el-option v-for="item in teacherData" :label="item.nickname" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="box_content">
          <el-form-item label="搜索">
            <el-input placeholder="关键字搜索" class="input-with-select">
              <el-select value="" slot="prepend" placeholder="请选择">
                <el-option label="学员状态" value="学员状态"></el-option>
                <el-option label="学生姓名" value="学生姓名"></el-option>
                <el-option label="以往就读学校" value="以往就读学校"></el-option>
                <el-option label="联系方式" value="联系方式"></el-option>
                <el-option label="主跟进人" value="主跟进人"></el-option>
                <el-option label="副跟进人" value="副跟进人"></el-option>
                <el-option label="来源途径" value="来源途径"></el-option>
              </el-select>
            </el-input>
          </el-form-item>
        </div>
        <div class="box_content">
          <el-form-item label="日期">
            <div class="block">
              <el-date-picker type="daterange" range-separator="至" start-placeholder="开始日期"
                              end-placeholder="结束日期"></el-date-picker>
            </div>
          </el-form-item>
        </div>
        <div class="box_content">
          <div style="text-align: left;margin-bottom: 10px">
            <el-button type="primary" icon="el-icon-search">查询</el-button>
            <el-button icon="el-icon-search">重置</el-button>
          </div>
        </div>
      </div>
    </el-form>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="意向学员" name="first">
        <div>
          <el-button type="primary" @click="NewStudentFile = true">新建学生档案</el-button>
          <el-button>导入学生档案</el-button>
          <el-button>导出学生档案</el-button>
        </div>
        <div style="margin-bottom: 20px;margin-top: 20px">
          <!--<el-button>取消选择</el-button>-->
          <el-button type="danger" @click="delChecked">删除选中</el-button>
        </div>
        <el-table v-loading="loading" :data="queryData" tooltip-effect="dark" style="width: 100%;" @select="onTableSelect" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="50px"></el-table-column>
          <el-table-column prop="unid" label="ID" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="follow_type" label="跟进状态" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <el-badge v-if="scope.row.follow_type==0" class="item">
                <el-button size="small">无状态</el-button>
              </el-badge>
              <el-badge :value="scope.row.follow.length" v-if="scope.row.follow_type==1" class="item">
                <el-button size="small">已跟进</el-button>
              </el-badge>
              <el-badge v-if="scope.row.follow_type==2" class="item">
                <el-button size="small">未跟进</el-button>
              </el-badge>
              <el-badge v-if="scope.row.follow_type==3" class="item">
                <el-button size="small">已注册</el-button>
              </el-badge>
              <el-badge v-if="scope.row.follow_type==4" class="item">
                <el-button size="small">未缴费</el-button>
              </el-badge>
              <el-badge v-if="scope.row.follow_type==5" class="item">
                <el-button size="small">未注册</el-button>
              </el-badge>
              <el-badge v-if="scope.row.follow_type==6" class="item">
                <el-button size="small">欠费</el-button>
              </el-badge>
            </template>
          </el-table-column>
          <el-table-column prop="student_name" label="学生姓名" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="sex" label="性别" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <div v-if="scope.row.sex==1">男</div>
              <div v-if="scope.row.sex==2">女</div>
            </template>
          </el-table-column>
          <el-table-column prop="" label="曾读学校" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="address" label="地址" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="province" label="省" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="city" label="市" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="area" label="区" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column fixed="right" label="操作" width="275">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="selectTable(scope.$index, scope.row)">查看</el-button>
              <el-button size="mini" type="success" @click="queryfollow(scope.$index, scope.row)">跟进</el-button>
              <el-button size="mini" type="info" @click="signup(scope.$index, scope.row)">报名</el-button>
              <el-button size="mini" type="danger" @click="delStudent(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <span class="demonstration"></span>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>
    <el-dialog title="新建学生档案" :visible.sync="NewStudentFile" width="70%">
      <el-form :model="formData" :rules="rules" ref="formData" label-width="80px" class="demo-ruleForm">
        <el-row style="margin-bottom: 20px;font-size: 20px">
          <el-col :span="1" style="color: darkgoldenrod;">1/5</el-col>
          <el-col :span="4">基本信息</el-col>
        </el-row>
        <div class="box">
          <div class="box_content">
            <el-form-item label="姓名" prop="student_name">
              <el-input v-model="formData.student_name" placeholder="请输入姓名" :value="formData.student_name"></el-input>
            </el-form-item>
          </div>
          <div class="box_content">
            <el-form-item label="性别" prop="sex">
              <el-select v-model="formData.sex" placeholder="请选择性别">
                <el-option label="男" value="1"></el-option>
                <el-option label="女" value="2"></el-option>
              </el-select>
            </el-form-item>
          </div>
        </div>
        <div class="box">
          <div class="box_content">
            <el-form-item label="证件号码" prop="card">
              <el-input placeholder="请输入证件号码" v-model="formData.card" class="input-with-select" style="width: 400px">
                <el-select v-model="formData.card_type" slot="prepend" placeholder="请选择证件类型" style="width: 90px">
                  <el-option v-for="item in cardType" :key="item.value" :label="item.label"
                             :value="item.value"></el-option>
                </el-select>
              </el-input>
            </el-form-item>
          </div>
        </div>
        <!--==========================================================================================-->
        <el-row style="margin-bottom: 20px;font-size: 20px">
          <el-col :span="1" style="color: darkgoldenrod;">2/5</el-col>
          <el-col :span="4">家庭信息</el-col>
        </el-row>
        <!--==========================================================================================-->
        {{formData}}
        <div class="box" v-for="item in formData.home.length">
          <div class="box_content">
            <el-form-item label="家长姓名">
              <el-input v-model="formData.home[item-1].parent_name" placeholder="请输入家长姓名"></el-input>
            </el-form-item>
          </div>
          <div class="box_content">
            <el-form-item label="家长称谓">
              <el-select v-model="formData.home[item-1].relation" placeholder="请选择称谓">
                <el-option label="爸爸" value="1"></el-option>
                <el-option label="妈妈" value="2"></el-option>
                <el-option label="爷爷" value="3"></el-option>
                <el-option label="奶奶" value="4"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="box_content">
            <el-form-item label="联系电话">
              <el-input placeholder="请输入" v-model="formData.home[item-1].phone">
                <template slot="prepend">+86</template>
              </el-input>
            </el-form-item>
          </div>
        </div>
        <div class="box">
          <div class="box_content">
            <el-form-item label="" style="text-align: center">
              <el-button type="info" @click="addhome">添加联系人</el-button>
            </el-form-item>
          </div>
        </div>
        <el-row style="margin-bottom: 20px;font-size: 20px">
          <el-col :span="1" style="color: darkgoldenrod;">3/5</el-col>
          <el-col :span="4">招生信息</el-col>
        </el-row>
        <div class="box">
          <div class="box_content">
            <el-form-item label="申请学期">
              <el-select class="select" v-model="formData.recruit[0].semester_id" placeholder="请选择申请学期">
                <el-option v-for="item in querySemester" :label="item.semester_name" :value="item.unid"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="box_content">
            <el-form-item label="申请年级">
              <el-select class="select" v-model="formData.recruit[0].grade" placeholder="请选择申请年级">
                <el-option v-for="item in ClbumData" :label="item.clbum_name" :value="item.unid"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="box_content">
            <el-form-item label="申请课程">
              <el-select class="select" v-model="formData.recruit[0].course_id" placeholder="请选择申请课程">
                <el-option v-for="item in queryLession" :label="item.lession_name" :value="item.unid"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="box_content">
            <el-form-item label="所属校区">
              <el-select class="select" v-model="formData.recruit[0].school_id" placeholder="请选择校区">
                <el-option v-for="item in school" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </div>
        </div>
        <div class="box">
          <div class="box_content">
            <el-form-item label="招生来源">
              <el-select class="select" v-model="formData.recruit[0].way_id" placeholder="请选择招生来源">
                <el-option v-for="item in channel" :key="item.value" :label="item.label"
                           :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="box_content">
            <el-form-item label="推荐人">
              <el-input v-model="formData.recruit[0].referrer" placeholder="请输入推荐人"></el-input>
            </el-form-item>
          </div>
          <div class="box_content">
            <el-form-item label="主跟进人">
              <el-input v-model="formData.recruit[0].teacher_id" placeholder="默认当前登录账号" disabled></el-input>
            </el-form-item>
          </div>
          <div class="box_content">
            <el-form-item label="副跟进人">
              <el-select class="select" v-model="formData.recruit[0].deputy_teacher_id" placeholder="请选择">
                <el-option v-for="item in teacherData" :label="item.nickname" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </div>
        </div>
        <div class="box">
          <div class="box_content">
            <el-form-item label="">
              <div class="block">
                意向度
                <el-rate></el-rate>
              </div>
            </el-form-item>
          </div>
        </div>
        <el-row style="margin-bottom: 20px;font-size: 20px">
          <el-col :span="1" style="color: darkgoldenrod;">4/5</el-col>
          <el-col :span="4">学业信息</el-col>
        </el-row>
        <div class="box">
          <div class="box_content2">
            <el-form-item label="曾读学校">
              <el-select class="select" v-model="formData.cousrse[0].school" placeholder="请选择申请学校">
                <el-option v-for="item in school" :key="item.value" :label="item.label" :value="item.label"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="box_content2">
            <el-form-item label="语文">
              <el-input v-model="formData.cousrse[0].Chinese" placeholder="请输入成绩"></el-input>
            </el-form-item>
          </div>
          <div class="box_content2">
            <el-form-item label="数学">
              <el-input v-model="formData.cousrse[0].Mathematics" placeholder="请输入成绩"></el-input>
            </el-form-item>
          </div>
          <div class="box_content2">
            <el-form-item label="英语">
              <el-input v-model="formData.cousrse[0].English" placeholder="请输入成绩"></el-input>
            </el-form-item>
          </div>
          <div class="box_content2">
            <el-form-item label="物理">
              <el-input v-model="formData.cousrse[0].Physics" placeholder="请输入成绩"></el-input>
            </el-form-item>
          </div>
          <div class="box_content2">
            <el-form-item label="化学">
              <el-input v-model="formData.cousrse[0].Chemistry" placeholder="请输入成绩"></el-input>
            </el-form-item>
          </div>
        </div>
        <div class="box">
          <div class="box_content2">
            <el-form-item label="曾读年级">
              <el-select class="select" v-model="formData.cousrse[0].grade" placeholder="请选择申请年级">
                <el-option v-for="item in ClbumData" :label="item.clbum_name" :value="item.unid"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="box_content2">
            <el-form-item label="历史">
              <el-input v-model="formData.cousrse[0].History" placeholder="请输入成绩"></el-input>
            </el-form-item>
          </div>
          <div class="box_content2">
            <el-form-item label="地理">
              <el-input v-model="formData.cousrse[0].Geography" placeholder="请输入成绩"></el-input>
            </el-form-item>
          </div>
          <div class="box_content2">
            <el-form-item label="政治">
              <el-input v-model="formData.cousrse[0].Politics" placeholder="请输入成绩"></el-input>
            </el-form-item>
          </div>
          <div class="box_content2">
            <el-form-item label="生物">
              <el-input v-model="formData.cousrse[0].Biology" placeholder="请输入成绩"></el-input>
            </el-form-item>
          </div>
          <div class="box_content2">
            <el-form-item label="信息科技">
              <el-input v-model="formData.cousrse[0].computer" placeholder="请输入成绩"></el-input>
            </el-form-item>
          </div>
        </div>
        <el-row style="margin-bottom: 20px;font-size: 20px">
          <el-col :span="1" style="color: darkgoldenrod;">5/5</el-col>
          <el-col :span="4">其他信息</el-col>
        </el-row>
        <el-row>
          <el-col :span="4">
            <el-form-item label="户籍地址" prop="province">
              <el-cascader
                prop="province"
                placeholder="请选择省/市/区"
                ref="cascaderCity"
                :value="cityArr"
                style="width: 300px"
                :options="options"
                :props="{
                          value: 'id',
                          label: 'name',
                          ...props
                        }"
                @change="handleChange"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="地址" prop="address">
              <el-input v-model="formData.address" placeholder="请输入详细地址"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="备注">
            <el-input type="textarea" placeholder="请输入，不超过1000字" v-model="formData.remark" maxlength="1000"
                      show-word-limit></el-input>
          </el-form-item>
        </el-row>
        <el-form-item>
          <el-button type="primary" @click="addStudent">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog v-loading="loading" title="查看学生档案" :visible.sync="selectTableDig" width="70%">
      <div v-if="selectData!=null">
        <el-form :model="selectData" ref="selectData" label-width="80px" class="demo-ruleForm">
          <el-form-item label="基本信息">1/5</el-form-item>
          <div class="box">
            <div class="box_content">
              <el-form-item label="姓名">
                <el-input :value="selectData.student_name" placeholder="" disabled></el-input>
              </el-form-item>
            </div>
            <div class="box_content">
              <el-form-item label="性别" prop="sex">
                <el-select :value="selectData.sex.toString()" placeholder="请选择性别" disabled>
                  <el-option label="男" value="1"></el-option>
                  <el-option label="女" value="2"></el-option>
                </el-select>
              </el-form-item>
            </div>
          </div>
          <div class="box">
            <div class="box_content">
              <el-form-item label="证件号码" prop="number">
                <el-input placeholder="" :value="selectData.card" class="input-with-select" disabled>
                  <el-select :value="selectData.card_type" slot="prepend" placeholder="请选择证件类型" style="width: 90px"
                             disabled>
                    <el-option v-for="item in cardType" :key="item.value" :label="item.label"
                               :value="item.value"></el-option>
                  </el-select>
                </el-input>
              </el-form-item>
            </div>
          </div>
          <div class="box" v-for="item in selectData.home.length">
            <div class="box_content">
              <el-form-item label="家长姓名">
                <el-input :value="selectData.home[item-1].parent_name" placeholder="" disabled></el-input>
              </el-form-item>
            </div>
            <div class="box_content">
              <el-form-item label="家长称谓">
                <el-select :value="selectData.home[item-1].relation.toString()" placeholder="请选择称谓" disabled>
                  <el-option label="爸爸" value="1"></el-option>
                  <el-option label="妈妈" value="2"></el-option>
                  <el-option label="爷爷" value="3"></el-option>
                  <el-option label="奶奶" value="4"></el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="box_content">
              <el-form-item label="联系电话">
                <el-input :value="selectData.home[item-1].phone" placeholder="" disabled>
                  <template slot="prepend">+86</template>
                </el-input>
              </el-form-item>
            </div>
          </div>
          <el-form-item label="家庭信息">2/5</el-form-item>
          <div v-if="selectData.recruit != null">
            <div class="box">
              <div class="box_content">
                <el-form-item label="申请学期">
                  <el-select :value="selectData.recruit.semester_id" class="select" placeholder="" disabled>
                    <el-option v-for="item in querySemester" :label="item.semester_name" :value="item.unid"></el-option>
                  </el-select>
                </el-form-item>
              </div>
              <div class="box_content">
                <el-form-item label="申请年级">
                  <el-select :value="selectData.recruit.grade" class="select" placeholder="" disabled>
                    <el-option v-for="item in ClbumData" :label="item.clbum_name" :value="item.unid"></el-option>
                  </el-select>
                </el-form-item>
              </div>
              <div class="box_content">
                <el-form-item label="申请课程">
                  <el-select :value="selectData.recruit.course_id" class="select" placeholder="" disabled>
                    <el-option v-for="item in queryLession" :label="item.lession_name" :value="item.unid"></el-option>
                  </el-select>
                </el-form-item>
              </div>
              <div class="box_content">
                <el-form-item label="所属校区">
                  <el-select :value="selectData.recruit.school_id" class="select" placeholder="" disabled>
                    <el-option v-for="item in school" :key="item.value" :label="item.label"
                               :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </div>
              <div class="box_content">

              </div>
            </div>
            <div class="box">
              <div class="box_content">
                <el-form-item label="招生来源">
                  <el-select :value="selectData.recruit.way_id" class="select" placeholder="" disabled>
                    <el-option v-for="item in channel" :key="item.value" :label="item.label"
                               :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </div>
              <div class="box_content">
                <el-form-item label="推荐人">
                  <el-input :value="selectData.recruit.referrer" placeholder="" disabled></el-input>
                </el-form-item>
              </div>
              <div class="box_content">
                <el-form-item label="主跟进人">
                  <el-input :value="selectData.recruit.teacher_id" placeholder="" disabled></el-input>
                </el-form-item>
              </div>
              <div class="box_content">
                <el-form-item label="副跟进人">
                  <el-select :value="selectData.recruit.deputy_teacher_id" class="select" placeholder="" disabled>
                    <el-option v-for="item in teacherData" :label="item.nickname" :value="item.id"></el-option>
                  </el-select>
                </el-form-item>
              </div>
              <div class="box_content">
                <div class="block" style="text-align: left">
                  <span>意向度</span>
                  <el-rate></el-rate>
                </div>
              </div>
            </div>
          </div>
          <el-form-item label="招生信息">3/5</el-form-item>
          <div v-if="selectData.course!=null">
            <div class="box">
              <div class="box_content2">
                <el-form-item label="曾读学校">
                  <el-select :value="selectData.course.school" class="select" placeholder="" disabled>
                    <el-option v-for="item in school" :key="item.value" :label="item.label"
                               :value="item.label"></el-option>
                  </el-select>
                </el-form-item>
              </div>
              <div class="box_content2">
                <el-form-item label="语文">
                  <el-input :value="selectData.course.Chinese" disabled></el-input>
                </el-form-item>
              </div>
              <div class="box_content2">
                <el-form-item label="数学">
                  <el-input :value="selectData.course.Mathematics" disabled></el-input>
                </el-form-item>
              </div>
              <div class="box_content2">
                <el-form-item label="英语">
                  <el-input :value="selectData.course.English" disabled></el-input>
                </el-form-item>
              </div>
              <div class="box_content2">
                <el-form-item :value="selectData.course.Physics" label="物理">
                  <el-input disabled></el-input>
                </el-form-item>
              </div>
              <div class="box_content2">
                <el-form-item label="化学">
                  <el-input :value="selectData.course.Chemistry" disabled></el-input>
                </el-form-item>
              </div>
            </div>
            <div class="box">
              <div class="box_content2">
                <el-form-item label="曾读年级">
                  <el-select :value="selectData.course.grade" class="select" placeholder="" disabled>
                    <el-option v-for="item in ClbumData" :label="item.clbum_name" :value="item.unid"></el-option>
                  </el-select>
                </el-form-item>
              </div>
              <div class="box_content2">
                <el-form-item label="历史">
                  <el-input :value="selectData.course.History" disabled></el-input>
                </el-form-item>
              </div>
              <div class="box_content2">
                <el-form-item label="地理">
                  <el-input :value="selectData.course.Geography" disabled></el-input>
                </el-form-item>
              </div>
              <div class="box_content2">
                <el-form-item label="政治">
                  <el-input :value="selectData.course.Politics" disabled></el-input>
                </el-form-item>
              </div>
              <div class="box_content2">
                <el-form-item label="生物">
                  <el-input :value="selectData.course.Biology" disabled></el-input>
                </el-form-item>
              </div>
              <div class="box_content2">
                <el-form-item label="信息科技">
                  <el-input :value="selectData.course.computer" disabled></el-input>
                </el-form-item>
              </div>
            </div>
          </div>
          <el-form-item label="学业信息">4/5</el-form-item>
          <el-row>
            <el-col :span="4">
              <el-form-item label="户籍地址" prop="province">
                <el-cascader
                  ref="cascaderCity"
                  :value="cityArr"
                  style="width: 300px"
                  v-model="realname"
                  :options="options"
                  disabled
                  :props="{
              value: 'id',
              label: 'name',
              ...props
              }"
                  @change="handleChange"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="地址" prop="DetailedAddress">
                <el-input :value="selectData.address" placeholder="" disabled></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-form-item label="备注">
              <el-input :value="selectData.remark" type="textarea" placeholder="" maxlength="1000" show-word-limit disabled></el-input>
            </el-form-item>
          </el-row>
          <el-form-item label="跟进记录">5/5</el-form-item>
          <div style="font-weight: bold" v-for="item in selectData.follow">
            <el-row class="selectFont">
              <el-col :span="4">
                <div>2020-08-05 15:29</div>
              </el-col>
              <el-col :span="4">
                <div v-if="item.communication == 1">网上</div>
                <div v-if="item.communication == 2">柜台</div>
                <div v-if="item.communication == 3">电话沟通</div>
              </el-col>
              <el-col :span="4">
                <div>跟进人：{{userName}}</div>
              </el-col>
            </el-row>
            <el-row class="selectFont">
              <el-col :span="6">
                <div></div>
              </el-col>
            </el-row>
            <el-row class="selectFont">
              <el-col :span="6">
                <div></div>
              </el-col>
            </el-row>
            <hr/>
          </div>
          <!--==========================================================================================-->
        </el-form>
      </div>
    </el-dialog>
    <el-dialog v-loading="loading" title="跟进学生档案" :visible.sync="followDig" width="100%">
      <el-form label-width="80px" class="demo-ruleForm" v-if="selectData!=null">
        <el-form-item label="基本信息">1/6</el-form-item>
        <el-row>
          <el-col :span="16">
            <div class="box">
              <div class="box_content3">
                <el-form-item label="姓名">
                  <el-input :value="selectData.student_name" placeholder="" disabled></el-input>
                </el-form-item>
              </div>
              <div class="box_content3">
                <el-form-item label="性别" prop="sex">
                  <el-select :value="selectData.sex.toString()" placeholder="请选择性别" disabled>
                    <el-option label="男" value="1"></el-option>
                    <el-option label="女" value="2"></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </div>
            <div class="box">
              <div class="box_content3">
                <el-form-item label="证件号码" prop="number">
                  <el-input :value="selectData.card" placeholder="" class="input-with-select" disabled>
                    <el-select value="" slot="prepend" placeholder="请选择证件类型" style="width: 90px" disabled>
                      <el-option v-for="item in cardType" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                  </el-input>
                </el-form-item>
              </div>
            </div>
            <el-form-item label="家庭信息">2/6</el-form-item>
            <div class="box" v-for="item in selectData.home.length">
              <div class="box_content3">
                <el-form-item label="家长姓名">
                  <el-input :value="selectData.home[item-1].parent_name" disabled></el-input>
                </el-form-item>
              </div>
              <div class="box_content3">
                <el-form-item label="家长称谓">
                  <el-select :value="selectData.home[item-1].relation" placeholder="请选择称谓" disabled>
                    <el-option label="爸爸" value="1"></el-option>
                    <el-option label="妈妈" value="2"></el-option>
                    <el-option label="爷爷" value="3"></el-option>
                    <el-option label="奶奶" value="4"></el-option>
                  </el-select>
                </el-form-item>
              </div>
              <div class="box_content3">
                <el-form-item label="联系电话">
                  <el-input :value="selectData.home[item-1].phone" placeholder="" disabled>
                    <template slot="prepend">+86</template>
                  </el-input>
                </el-form-item>
              </div>
            </div>
            <el-form-item label="招生信息">3/6</el-form-item>
            <div v-if="selectData.recruit != null">
              <div class="box">
                <div class="box_content3">
                  <el-form-item label="申请学期">
                    <el-select :value="selectData.recruit.semester_id" class="select" placeholder="" disabled>
                      <el-option v-for="item in querySemester" :label="item.semester_name" :value="item.unid"></el-option>
                    </el-select>
                  </el-form-item>
                </div>
                <div class="box_content3">
                  <el-form-item label="申请年级">
                    <el-select :value="selectData.recruit.grade" class="select" placeholder="" disabled>
                      <el-option v-for="item in ClbumData" :label="item.clbum_name" :value="item.unid"></el-option>
                    </el-select>
                  </el-form-item>
                </div>
                <div class="box_content3">
                  <el-form-item label="申请课程">
                    <el-select :value="selectData.recruit.course_id" class="select" placeholder="" disabled>
                      <el-option v-for="item in queryLession" :label="item.lession_name" :value="item.unid"></el-option>
                    </el-select>
                  </el-form-item>
                </div>
                <div class="box_content3">
                  <el-form-item label="所属校区">
                    <el-select :value="selectData.recruit.school_id" class="select" placeholder="" disabled>
                      <el-option v-for="item in school" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                  </el-form-item>
                </div>
                <div class="box_content3">
                  <el-form-item label="招生来源">
                    <el-select :value="selectData.recruit.way_id" class="select" placeholder="" disabled>
                      <el-option v-for="item in channel" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                  </el-form-item>
                </div>
                <div class="box_content3">
                  <el-form-item label="推荐人">
                    <el-input :value="selectData.recruit.referrer" placeholder="" disabled></el-input>
                  </el-form-item>
                </div>
                <div class="box_content3">
                  <el-form-item label="主跟进人">
                    <el-input :value="selectData.recruit.teacher_id" placeholder="" disabled></el-input>
                  </el-form-item>
                </div>
                <div class="box_content3">
                  <el-form-item label="副跟进人">
                    <el-select :value="selectData.recruit.deputy_teacher_id" class="select" placeholder="" disabled>
                      <el-option v-for="item in teacherData" :label="item.nickname" :value="item.id"></el-option>
                    </el-select>
                  </el-form-item>
                </div>
                <div class="box_content3">
                  <div class="block" style="text-align: center">
                    <span>意向度</span><el-rate disabled></el-rate>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="7" style="margin-left: 20px">
            <div>增加跟进记录：</div>
            <el-form label-width="80px">
              <div class="box">
                <!--<div class="box_content3">
                  <el-form-item label="沟通时间">
                    <el-date-picker type="date" placeholder="请选择时间" style="width: 100%"></el-date-picker>
                  </el-form-item>
                </div>-->
                <div class="box_content3">
                  <el-form-item label="沟通方式" prop="communication">
                    <el-select v-model="followData.communication" class="select" placeholder="请选择沟通方式" style="width: 100%">
                      <el-option label="网上" value="1"></el-option>
                      <el-option label="柜台" value="2"></el-option>
                      <el-option label="电话沟通" value="3"></el-option>
                    </el-select>
                  </el-form-item>
                </div>
                <div class="box_content3">
                  <el-form-item label="沟通内容">
                    <el-input v-model="followData.content" type="textarea" placeholder="" maxlength="1000" show-word-limit></el-input>
                  </el-form-item>
                </div>
                <div class="box_content3">
                  <el-form-item label="">
                    <div class="block">
                      意向度<el-rate v-model="followData.intention"></el-rate>
                    </div>
                  </el-form-item>
                </div>
                <div class="box_content3">
                  <el-form-item label="">
                    <el-checkbox v-model="checked">下次沟通时间</el-checkbox>
                  </el-form-item>
                </div>
                <div class="box_content3">
                  <el-form-item label="" prop="next_time">
                    <el-date-picker type="date" placeholder="请选择时间" style="width: 100%" v-if="checked==false" disabled></el-date-picker>
                    <el-date-picker v-model="followData.next_time" type="date" value-format="yyyy-MM-dd" placeholder="请选择时间" style="width: 100%" v-if="checked==true"></el-date-picker>
                  </el-form-item>
                </div>
              </div>
              <div class="box" style="text-align: center">
                <div class="box_content3">
                  <el-form-item label="" prop="Time2">
                    <el-button type="primary" @click="restfollow">重 置</el-button>
                    <el-button type="primary" @click="addfollow">确 认 跟 进</el-button>
                  </el-form-item>
                </div>
              </div>
            </el-form>
          </el-col>
        </el-row>
        <el-col :span="1"></el-col>
        <el-col :span="4" style="margin-left: 60px">
        </el-col>
        <el-form-item label="学业信息">4/6</el-form-item>
        <div v-if="selectData.course!=null">
          <div class="box">
            <div class="box_content2">
              <el-form-item label="曾读学校">
                <el-select :value="selectData.course.school" class="select" placeholder="" disabled>
                  <el-option v-for="item in school" :key="item.value" :label="item.label" :value="item.label"></el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="box_content2">
              <el-form-item label="语文">
                <el-input :value="selectData.course.Chinese" disabled></el-input>
              </el-form-item>
            </div>
            <div class="box_content2">
              <el-form-item label="数学">
                <el-input :value="selectData.course.Mathematics" disabled></el-input>
              </el-form-item>
            </div>
            <div class="box_content2">
              <el-form-item label="英语">
                <el-input :value="selectData.course.English" disabled></el-input>
              </el-form-item>
            </div>
            <div class="box_content2">
              <el-form-item label="物理">
                <el-input :value="selectData.course.Physics" disabled></el-input>
              </el-form-item>
            </div>
            <div class="box_content2">
              <el-form-item label="化学">
                <el-input :value="selectData.course.Chemistry" disabled></el-input>
              </el-form-item>
            </div>
          </div>
          <div class="box">
            <div class="box_content2">
              <el-form-item label="曾读年级">
                <el-select :value="selectData.course.grade" class="select" placeholder="" disabled>
                  <el-option v-for="item in ClbumData" :label="item.clbum_name" :value="item.unid"></el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="box_content2">
              <el-form-item label="历史">
                <el-input :value="selectData.course.History" disabled></el-input>
              </el-form-item>
            </div>
            <div class="box_content2">
              <el-form-item label="地理">
                <el-input :value="selectData.course.Geography" disabled></el-input>
              </el-form-item>
            </div>
            <div class="box_content2">
              <el-form-item label="政治">
                <el-input :value="selectData.course.Politics" disabled></el-input>
              </el-form-item>
            </div>
            <div class="box_content2">
              <el-form-item label="生物">
                <el-input :value="selectData.course.school" disabled></el-input>
              </el-form-item>
            </div>
            <div class="box_content2">
              <el-form-item label="信息科技">
                <el-input :value="selectData.course.computer" disabled></el-input>
              </el-form-item>
            </div>
          </div>
        </div>
        <el-form-item label="其他学校">5/6</el-form-item>
        <el-row>
          <el-col :span="4">
            <el-form-item label="户籍地址" prop="province">
              <el-cascader
                ref="cascaderCity"
                :value="cityArr"
                style="width: 300px"
                v-model="realname"
                :options="options"
                disabled
                :props="{
              value: 'id',
              label: 'name',
              ...props
              }"
                @change="handleChange"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="地址" prop="DetailedAddress">
              <el-input :value="selectData.address" placeholder="" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="备注">
            <el-input :value="selectData.remark" type="textarea" placeholder="" maxlength="1000" show-word-limit disabled></el-input>
          </el-form-item>
        </el-row>
        <el-form-item label="跟进记录">6/6</el-form-item>
        <div style="font-weight: bold" v-for="item in selectData.follow">
          <el-row class="selectFont">
            <el-col :span="4">
              <div>2020-08-05 15:29</div>
            </el-col>
            <el-col :span="4">
              <div v-if="item.communication == 1">网上</div>
              <div v-if="item.communication == 2">柜台</div>
              <div v-if="item.communication == 3">电话沟通</div>
            </el-col>
            <el-col :span="4">
              <div>跟进人：{{userName}}</div>
            </el-col>
          </el-row>
          <el-row class="selectFont">
            <el-col :span="6">
              <div></div>
            </el-col>
          </el-row>
          <el-row class="selectFont">
            <el-col :span="6">
              <div></div>
            </el-col>
          </el-row>
          <hr/>
        </div>
      </el-form>
    </el-dialog>
    <el-dialog v-loading="loading" title="报名学生档案" :visible.sync="signupDig" width="70%">
      <el-form ref="listData" label-width="80px" class="demo-ruleForm" v-if="selectData!=null">
        <el-row style="margin-bottom: 20px;font-size: 30px">
          <el-col :span="1" style="color: darkgoldenrod;">1/3</el-col>
          <el-col :span="4">基本信息</el-col>
        </el-row>
        <div class="box">
          <div class="box_content">
            <el-form-item label="姓名">
              <el-input :value="selectData.student_name" placeholder="" disabled></el-input>
            </el-form-item>
          </div>
          <div class="box_content">
            <el-form-item label="性别" prop="sex">
              <el-select :value="selectData.sex.toString()" placeholder="请选择性别" disabled>
                <el-option label="男" value="1"></el-option>
                <el-option label="女" value="2"></el-option>
              </el-select>
            </el-form-item>
          </div>
        </div>
        <div class="box">
          <div class="box_content">
            <el-form-item label="证件号码" prop="number">
              <el-input :value="selectData.card" placeholder="" class="input-with-select" disabled>
                <el-select value="" slot="prepend" placeholder="请选择证件类型" style="width: 90px" disabled>
                  <el-option v-for="item in cardType" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-input>
            </el-form-item>
          </div>
        </div>
        <el-row>
          <el-form-item label="">
            <el-switch
              active-text="此手机号是否关智助教育APP学生版">
            </el-switch>
          </el-form-item>
        </el-row>
        <el-row style="margin-bottom: 20px;font-size: 30px">
          <el-col :span="1" style="color: darkgoldenrod;">2/3</el-col>
          <el-col :span="4">家庭信息</el-col>
        </el-row>
        <div class="box" v-for="item in selectData.home.length">
          <div class="box_content">
            <el-form-item label="家长姓名">
              <el-input :value="selectData.home[item-1].parent_name" placeholder="" disabled></el-input>
            </el-form-item>
          </div>
          <div class="box_content">
            <el-form-item label="家长称谓">
              <el-select :value="selectData.home[item-1].relation" value="" placeholder="请选择称谓" disabled>
                <el-option label="爸爸" value="1"></el-option>
                <el-option label="妈妈" value="2"></el-option>
                <el-option label="爷爷" value="3"></el-option>
                <el-option label="奶奶" value="4"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="box_content">
            <el-form-item label="联系电话">
              <el-input :value="selectData.home[item-1].phone" placeholder="" disabled>
                <template slot="prepend">+86</template>
              </el-input>
            </el-form-item>
          </div>
        </div>
        <el-row>
          <el-form-item label="">
            <el-switch
              active-text="此手机号是否关智助教育APP学生版">
            </el-switch>
          </el-form-item>
        </el-row>
        <el-row style="margin-bottom: 20px;font-size: 30px">
          <el-col :span="1" style="color: darkgoldenrod;">3/3</el-col>
          <el-col :span="4">招生信息</el-col>
        </el-row>
        <el-row>
          <el-col :span=24>
            <div style="width: 100%;height: 200px;font-size: 150px;border: 1px solid black;text-align: center;line-height: 200px;border-radius:25px;" class="el-icon-shopping-cart-2" @click="addshop = true"></div>
          </el-col>
        </el-row>
        <!--添加购物项目-->
        <el-dialog title="提示" :visible.sync="addshop" width="70%" append-to-body>
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="课程类" name="first">
              <el-form label-width="80px">
                <el-row>
                  <el-col :span="8">
                    <div class="grid-content bg-purple">
                      <el-form-item label="学期">
                        <el-select value="" placeholder="请选择学期">
                          <el-option v-for="item in querySemester" :label="item.semester_name" :value="item.unid"></el-option>
                        </el-select>
                      </el-form-item>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="grid-content bg-purple-light">
                      <el-form-item label="年级">
                        <el-select value="" placeholder="请选择年级">
                          <el-option v-for="item in ClbumData" :label="item.clbum_name" :value="item.unid"></el-option>
                        </el-select>
                      </el-form-item>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="grid-content bg-purple">
                      <el-form-item label="课程">
                        <el-select value="" placeholder="请选择课程">
                          <el-option v-for="item in queryLession" :label="item.lession_name" :value="item.unid"></el-option>
                        </el-select>
                      </el-form-item>
                    </div>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="8">
                    <div class="grid-content bg-purple">
                      <el-form-item label="授课老师">
                        <el-select value="" placeholder="请选择授课老师">
                          <el-option v-for="item in teacherData" :label="item.nickname" :value="item.id"></el-option>
                        </el-select>
                      </el-form-item>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="grid-content bg-purple-light">
                      <el-form-item label="日期">
                        <div class="block">
                          <el-date-picker format="yyyy-MM-dd" type="date" placeholder="选择日期"></el-date-picker>
                        </div>
                      </el-form-item>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="grid-content bg-purple">
                      <el-form-item label="收费类目">
                        <el-select value="" placeholder="请选择活动区域">
                          <el-option label="类目一" value="类目一"></el-option>
                          <el-option label="类目二" value="类目二"></el-option>
                        </el-select>
                      </el-form-item>
                    </div>
                  </el-col>
                </el-row>
                <el-row style="margin-bottom: 20px">
                  <el-col :span="24">
                    <div class="grid-content bg-purple" style="margin: 0 auto; text-align: center">
                      <el-button type="primary">查询</el-button>
                      <el-button>重置</el-button>
                    </div>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <div class="grid-content bg-purple" style="margin: 0 auto; text-align: center">
                      <el-table :data="payData" border style="width: 100%">
                        <el-table-column fixed prop="pay_num" label="收费编号" width="150"></el-table-column>
                        <el-table-column prop="lession.lession_name" label="名称" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="lession.lession_type" label="课程类型" :show-overflow-tooltip="true">
                          <template slot-scope="scope">
                            <div v-if="scope.row.lession.lession_type==1">线上课</div>
                            <div v-if="scope.row.lession.lession_type==2">线下课</div>
                          </template>
                        </el-table-column>
                        <el-table-column prop="" label="进度" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="" label="已报人数" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="" label="开课时间" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="" label="上课日期" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="" label="上课时间" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="price" label="价格" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column fixed="right" label="操作" width="180">
                          <template slot-scope="scope">
                            <el-button type="primary" size="small">信息</el-button>
                            <el-button type="warning" size="small" @click="addShopcar1(scope.$index, scope.row)">加入购物车</el-button>
                          </template>
                        </el-table-column>
                      </el-table>
                    </div>
                  </el-col>
                </el-row>
                <hr/>
                <el-row>
                  <div v-for="item in shopcar1">
                    <el-col :span="24">
                      <div v-if="item.lession.lession_type==1">1、{{item.lession.lession_num}}  {{item.lession.lession_name}}   线上课    {{item.price}}元</div>
                      <div v-if="item.lession.lession_type==2">1、{{item.lession.lession_num}}  {{item.lession.lession_name}}   线下课    {{item.price}}元</div>
                    </el-col>
                  </div>
                  <el-col :span="24" style="text-align: right">
                    <div>金额：{{money1}}</div>
                  </el-col>
                  <div style="float: right;font-size: 100px;margin-top: 0px;margin-bottom: 0px" class="el-icon-shopping-cart-2"></div>
                  <el-col :span="24">
                    <div style="float: right">
                      <el-button type="primary" @click="restShopcar">重置</el-button>
                      <el-button type="primary">保存</el-button>
                    </div>
                  </el-col>
                  <el-col :span="24" style="margin-top: 20px">
                    <el-form-item label="备注">
                      <el-input type="textarea" placeholder="请输入备注"  maxlength="1000" show-word-limit></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24" style="margin-top: 20px">
                    <div style="float: right">
                      <el-button type="primary">确认提交</el-button>
                    </div>
                  </el-col>
                </el-row>
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="教辅类" name="second">
              <el-form label-width="80px">
                <el-row>
                  <el-col :span="8">
                    <div class="grid-content bg-purple">
                      <el-form-item label="学期">
                        <el-select value="" placeholder="请选择学期">
                          <el-option label="第一学期" value="第一学期"></el-option>
                          <el-option label="第二学期" value="第二学期"></el-option>
                        </el-select>
                      </el-form-item>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="grid-content bg-purple-light">
                      <el-form-item label="年级">
                        <el-select value="" placeholder="请选择年级">
                          <el-option label="一年级" value="一年级"></el-option>
                          <el-option label="二年级" value="二年级"></el-option>
                        </el-select>
                      </el-form-item>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="grid-content bg-purple">
                      <el-form-item label="课程">
                        <el-select value="" placeholder="请选择课程">
                          <el-option label="语文" value="1"></el-option>
                          <el-option label="数学" value="2"></el-option>
                          <el-option label="英语" value="3"></el-option>
                          <el-option label="物理" value="4"></el-option>
                          <el-option label="化学" value="5"></el-option>
                          <el-option label="生物" value="6"></el-option>
                          <el-option label="历史" value="7"></el-option>
                          <el-option label="政治" value="8"></el-option>
                          <el-option label="地理" value="9"></el-option>
                          <el-option label="信息科技" value="10"></el-option>
                        </el-select>
                      </el-form-item>
                    </div>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="8">
                    <div class="grid-content bg-purple">
                      <el-form-item label="授课老师">
                        <el-select value="" placeholder="请选择授课老师">
                          <el-option label="陈老师" value="陈老师"></el-option>
                          <el-option label="李老师" value="李老师"></el-option>
                        </el-select>
                      </el-form-item>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="grid-content bg-purple-light">
                      <el-form-item label="活动区域">
                        <el-select value="" placeholder="请选择活动区域">
                          <el-option label="区域一" value="区域一"></el-option>
                          <el-option label="区域二" value="区域二"></el-option>
                        </el-select>
                      </el-form-item>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="grid-content bg-purple">
                      <el-form-item label="收费类目">
                        <el-select value="" placeholder="请选择活动区域">
                          <el-option label="类目一" value="类目一"></el-option>
                          <el-option label="类目二" value="类目二"></el-option>
                        </el-select>
                      </el-form-item>
                    </div>
                  </el-col>
                </el-row>
                <el-row style="margin-bottom: 20px">
                  <el-col :span="24">
                    <div class="grid-content bg-purple" style="margin: 0 auto; text-align: center">
                      <el-button type="primary">查询</el-button>
                      <el-button>重置</el-button>
                    </div>
                  </el-col>
                </el-row>
                <el-row type="flex" justify="center">
                  <el-col :span="24">
                    <div class="grid-content bg-purple" style="margin: 0 auto; text-align: center">
                      <el-table border style="width: 100%;">
                        <el-table-column fixed prop="" label="收费编号" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="" label="名称" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="" label="类目" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="" label="库存" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column label="购买数量" :show-overflow-tooltip="true">
                          <template slot-scope="scope">
                            <el-input-number v-model="num" :min="1" :max="10" label="描述文字"></el-input-number>
                          </template>
                        </el-table-column>
                        <el-table-column prop="zip" label="价格" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="zip" label="开课时间" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column fixed="right" label="操作" width="180">
                          <template slot-scope="scope">
                            <el-button type="warning" size="small" @click="addShopcar2(scope.$index, scope.row)">加入购物车</el-button>
                          </template>
                        </el-table-column>
                      </el-table>
                    </div>
                  </el-col>
                </el-row>
                <hr/>
                <el-row>
                  <el-col :span="20">
                    <div>1、2020年冬季  国际朗文课程   线下课程  开课时间：2020年12月12日 上课日期：一、二、三、四、五、六、日  上课时间10：00-12：00</div>
                  </el-col>
                  <el-col :span="4" style="text-align: right">
                    <div>金额：1000  元</div>
                  </el-col>
                  <el-col :span="20">
                    <div>2、国际朗文3 AB教材     1套</div>
                  </el-col>
                  <el-col :span="4" style="text-align: right">
                    <div>金额：100  元</div>
                  </el-col>
                  <div style="float: right;font-size: 100px;margin-top: 0px;margin-bottom: 0px" class="el-icon-shopping-cart-2"></div>
                  <el-col :span="24">
                    <div style="float: right">
                      <el-button type="primary">重置</el-button>
                      <el-button type="primary">保存</el-button>
                    </div>
                  </el-col>
                  <el-col :span="24" style="margin-top: 20px">
                    <el-form-item label="备注">
                      <el-input type="textarea" placeholder="请输入备注"  maxlength="1000" show-word-limit></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24" style="margin-top: 20px">
                    <div style="float: right">
                      <el-button type="primary">确认提交</el-button>
                    </div>
                  </el-col>
                </el-row>
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="杂费类" name="third">
              <el-form label-width="80px">
                <el-row>
                  <el-col :span="8">
                    <div class="grid-content bg-purple">
                      <el-form-item label="学期">
                        <el-select value="" placeholder="请选择学期">
                          <el-option label="第一学期" value="第一学期"></el-option>
                          <el-option label="第二学期" value="第二学期"></el-option>
                        </el-select>
                      </el-form-item>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="grid-content bg-purple-light">
                      <el-form-item label="年级">
                        <el-select value="" placeholder="请选择年级">
                          <el-option label="一年级" value="一年级"></el-option>
                          <el-option label="二年级" value="二年级"></el-option>
                        </el-select>
                      </el-form-item>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="grid-content bg-purple">
                      <el-form-item label="课程">
                        <el-select value="" placeholder="请选择课程">
                          <el-option label="语文" value="1"></el-option>
                          <el-option label="数学" value="2"></el-option>
                          <el-option label="英语" value="3"></el-option>
                          <el-option label="物理" value="4"></el-option>
                          <el-option label="化学" value="5"></el-option>
                          <el-option label="生物" value="6"></el-option>
                          <el-option label="历史" value="7"></el-option>
                          <el-option label="政治" value="8"></el-option>
                          <el-option label="地理" value="9"></el-option>
                          <el-option label="信息科技" value="10"></el-option>
                        </el-select>
                      </el-form-item>
                    </div>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="8">
                    <div class="grid-content bg-purple">
                      <el-form-item label="授课老师">
                        <el-select value="" placeholder="请选择授课老师">
                          <el-option label="陈老师" value="陈老师"></el-option>
                          <el-option label="李老师" value="李老师"></el-option>
                        </el-select>
                      </el-form-item>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="grid-content bg-purple-light">
                      <el-form-item label="活动区域">
                        <el-select value="" placeholder="请选择活动区域">
                          <el-option label="区域一" value="区域一"></el-option>
                          <el-option label="区域二" value="区域二"></el-option>
                        </el-select>
                      </el-form-item>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="grid-content bg-purple">
                      <el-form-item label="收费类目">
                        <el-select value="" placeholder="请选择活动区域">
                          <el-option label="类目一" value="类目一"></el-option>
                          <el-option label="类目二" value="类目二"></el-option>
                        </el-select>
                      </el-form-item>
                    </div>
                  </el-col>
                </el-row>
                <el-row style="margin-bottom: 20px">
                  <el-col :span="24">
                    <div class="grid-content bg-purple" style="margin: 0 auto; text-align: center">
                      <el-button type="primary">查询</el-button>
                      <el-button>重置</el-button>
                    </div>
                  </el-col>
                </el-row>
                <el-row type="flex" justify="center">
                  <el-col :span="24">
                    <div class="grid-content bg-purple" style="margin: 0 auto; text-align: center">
                      <el-table border style="width: 100%;">
                        <el-table-column fixed prop="" label="收费编号" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="" label="名称" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="" label="类目" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="" label="库存" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column label="购买数量" :show-overflow-tooltip="true">
                          <template slot-scope="scope">
                            <el-input-number v-model="num" :min="1" :max="10" label="描述文字"></el-input-number>
                          </template>
                        </el-table-column>
                        <el-table-column prop="zip" label="价格" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="zip" label="开课时间" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column fixed="right" label="操作" width="180">
                          <template slot-scope="scope">
                            <el-button type="warning" size="small" @click="addShopcar3(scope.$index, scope.row)">加入购物车</el-button>
                          </template>
                        </el-table-column>
                      </el-table>
                    </div>
                  </el-col>
                </el-row>
                <hr/>
                <el-row>
                  <el-col :span="20">
                    <div>1、2020年冬季  国际朗文课程   线下课程  开课时间：2020年12月12日 上课日期：一、二、三、四、五、六、日  上课时间10：00-12：00</div>
                  </el-col>
                  <el-col :span="4" style="text-align: right">
                    <div>金额：1000  元</div>
                  </el-col>
                  <el-col :span="20">
                    <div>2、国际朗文3 AB教材     1套</div>
                  </el-col>
                  <el-col :span="4" style="text-align: right">
                    <div>金额：100  元</div>
                  </el-col>
                  <el-col :span="20">
                    <div>3、优惠折扣     1笔</div>
                  </el-col>
                  <el-col :span="4" style="text-align: right">
                    <div>金额：-200  元</div>
                  </el-col>
                  <div style="float: right;font-size: 100px;margin-top: 0px;margin-bottom: 0px" class="el-icon-shopping-cart-2"></div>
                  <el-col :span="24">
                    <div style="float: right">
                      <el-button type="primary">重置</el-button>
                      <el-button type="primary">保存</el-button>
                    </div>
                  </el-col>
                  <el-col :span="24" style="margin-top: 20px">
                    <el-form-item label="备注">
                      <el-input type="textarea" placeholder="请输入备注"  maxlength="1000" show-word-limit></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24" style="margin-top: 20px">
                    <div style="float: right">
                      <el-button type="primary">确认提交</el-button>
                    </div>
                  </el-col>
                </el-row>
              </el-form>
            </el-tab-pane>
          </el-tabs>
        </el-dialog>
        <el-row style="margin-top: 10px;margin-bottom: 30px">
          <el-col :span="24">
            <div>收费核算：</div>
          </el-col>
          <div style="height: 100px"></div>
          <hr/>
          <div style="float: right;margin-right: 100px">合计费用：</div>
        </el-row>
        <el-row>
          <el-form-item label="备注">
            <el-input type="textarea" placeholder="请输入，不超过1000字" maxlength="1000" show-word-limit></el-input>
          </el-form-item>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  import {
    addStudentRecruit,
    selectStudent,
    addStudentHome,
    addStudentCourse,
    addFollow,
    addStudent,
    delStudent,
    selectStudentById,
    queryLessionList,
    querySemesterList,
    queryClbum,
    queryTeacher,
    queryPay,
    querySemester
  } from '@/api/studentRecruit.js'
  import addressData from '@/components/CascaderCity/addressData.json'
  import { getSessionInfo, delSessionInfo } from '@/utils/auth'
  import store from '../../store' // get token
  export default {
    props: {
      getUserId: null,
      /**
       * 默认区域传入格式:
       * 非多选(props.multiple = false): 北京市/北京市/东城区
       * 多选(props.multiple = true): 北京市/北京市/东城区,广东省/广州市/天河区
       */
      value: {
        type: String,
        default: ''
      },
      /**
       * 默认是regionData
       * regionData(省市区) provinceAndCityData(省市)
       */
      optionType: {
        type: String,
        default: 'regionData',
        validator: function(value) {
          return ['regionData', 'provinceAndCityData'].indexOf(value) !== -1 // 这个值必须匹配下列字符串中的一个
        }
      },
      /**
       * 是否需要开启全国
       */
      isAddAll: {
        type: Boolean,
        default: false
      },
      placeholder: {
        type: String,
        default: ''
      },
      props: {
        type: Object,
        default() {
          return {}
        }
      }
    },
    name: 'index',
    data() {
      return {
        money1:0,  //购物车金额
        money2:0,  //购物车金额
        money3:0,  //购物车金额
        shopcar1:[],  //购物车1
        shopcar2:[],  //购物车2
        shopcar3:[],  //购物车3
        userName:store.getters.name,  //用户名
        studentMes:null,  //获取学生信息
        followData:{
          student_id:null,  //学生id
          communication:null, //沟通方式
          intention:null, //意向度
          content:null, //沟通内容
          next_time:null //	下次沟通时间
        },
        payData:null,   //查看全部收费课程
        teacherData:null, //查看全部教师
        ClbumData:null, //查看全部班级
        querySemester:null, //查看全部学期
        queryLession:null,  //查看全部课程
        checkedData:null, //选择状态
        loading: false, //加载数据
        addshop:false,
        checked: false,
        realname: [], //查看信息城市级联
        selectData: null, //根据unid查询学生信息
        signupDig: false, //报名Dig弹窗
        followDig: false, //跟进Dig弹窗
        selectTableDig: false,  //查看学生信息Dig弹窗
        NewStudentFile: false,  //新建学生信息Dig弹窗
        /*城市级联*/
        cityArr: [],
        options: [],
        isChange: false,
        //添加学生信息
        formData: {
          student_name: '',  //学生名字
          sex: null, //性别 1:男，2女
          address: '', //详细地址
          province: 0,  //省
          city: 0, //市
          area: 0, //区
          remark: '',  //备注
          card: '',  //身份证
          card_type: null, //证件类型 1身份证
          home: [{
            student_id: 0,  //学生unid
            phone: '', //电话
            parent_name: '', //家长姓名
            relation: null  //称谓 1:爸爸，2妈妈，3爷爷，4奶奶
          }],
          recruit: [{
            semester_id: '', //学期
            grade: null, //年级
            course_id: '', //课程
            teacher_id: null,  //主根进人id
            student_id: 0,  //学生id
            deputy_teacher_id: null, //副跟进人
            school_id: null, //所属校区id
            way_id: null, //来源途径 1:口碑介绍，2电话邀约，3课程邀约，4广告宣传，5网络招生
            referrer: ''  //推荐人
          }],
          cousrse: [{
            school: null,  //就读学校
            grade: null, //年级
            student_id: 0,  //学生id
            Chinese: null, //语文成绩
            Mathematics: null, //数学成绩
            English: null, //英语成绩
            Physics: null, //物理成绩
            Chemistry: null, //化学成绩
            Biology: null, //生物成绩
            History: null, //历史成绩
            Politics: null,  //政治成绩
            Geography: null, //地理成绩
            computer: null   //信息科技
          }]
        },
        //分页
        page: 1,
        limit: 10,
        total: null,
        currentPage: 1,
        queryData: null,  //分页查询
        activeName: 'first',
        //教师
        teacher: [{
          value: '选项1',
          label: '张老师'
        }, {
          value: '选项2',
          label: '李老师'
        }, {
          value: '选项3',
          label: '黄老师'
        }],
        //课程
        course: [{
          value: '选项1',
          label: '语文'
        }, {
          value: '选项2',
          label: '英语'
        }, {
          value: '选项3',
          label: '数学'
        }],
        //学期
        semester: [{
          value: '选项1',
          label: '第一学期'
        }, {
          value: '选项2',
          label: '第二学期'
        }],
        /*证件*/
        cardType: [{
          value: 1,
          label: '身份证'
        }, {
          value: 2,
          label: '军官证'
        }],
        /*年级*/
        grade: [{
          value: 1,
          label: '一年级'
        }, {
          value: 2,
          label: '二年级'
        }],
        /*曾读学校*/
        school: [{
          value: 1,
          label: '一小'
        }, {
          value: 2,
          label: '二小'
        }],
        /*招生来源*/
        channel: [{
          value: 1,
          label: '网上'
        }, {
          value: 2,
          label: '专台'
        }],
        /*副跟进人*/
        teacher2: [{
          value: 1,
          label: '陈老师'
        }, {
          value: 2,
          label: '李老师'
        }],
        /*表单验证*/
        rules: {
          student_name: [
            { required: true, message: '请输入姓名', trigger: 'blur,change' }
          ],
          sex: [
            { required: true, message: '请输入性别', trigger: 'blur,change' }
          ],
          nation: [
            { required: true, message: '请输入民族', trigger: 'blur,change' }
          ],
          nationality: [
            { required: true, message: '请输入国籍', trigger: 'blur,change' }
          ],
          birthday: [
            { required: true, message: '请选择日期', trigger: 'blur,change' }
          ],
          phone: [
            { required: true, message: '请输入联系方式', trigger: 'blur,change' }
          ],
          card: [
            { required: true, message: '请输入证件号', trigger: 'blur,change' }
            /*{pattern: /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/, message: '证件号码格式有误！', trigger: 'blur','change'}*/
          ],
          province: [
            { required: true, message: '请选择省市区', trigger: 'blur,change' }
          ],
          address: [
            { required: true, message: '请输入详细地址', trigger: 'blur,change' }
          ],
          card_type: [
            { required: true, message: '请选择证件类型', trigger: 'blur,change' }
          ]
        }
      }
    },
    methods: {
        //重置购物车
        restShopcar(){
          this.money1 = null
          this.shopcar1 = []
        },
        //课程类加入购物车
        addShopcar1(index,row){
          console.log('加入购物车',row)
          this.shopcar1.push(row)
          console.log('购物车数组',this.shopcar1)
          if (this.shopcar1.length!=0){
            for (let i = 0; i < this.shopcar1.length; i++) {
              this.money1+= this.shopcar1[i].price
            }
          }
        },
        //课程类加入购物车
        addShopcar2(index,row){
          console.log('加入购物车',row)
          this.shopcar2.push(row)
          console.log('购物车数组',this.shopcar2)
        },
        //课程类加入购物车
        addShopcar3(index,row){
          console.log('加入购物车',row)
          this.shopcar3.push(row)
          console.log('购物车数组',this.shopcar3)
        },
        //获取所有收费课程信息
        async queryPay(){
          let queryData = {

          }
          let resData = await queryPay(queryData)
          console.log('获取收费课程',resData)
          if(resData.code == 200){
            this.payData = resData.data
            this.$message.success('获取教师成功！')
          }else {
            this.$message.error('获取教师失败！')
          }
        },
        //获取所有教师
        async queryTeacher(){
          let queryData = {

          }
          let resData = await queryTeacher(queryData)
          console.log('获取教师',resData)
          if(resData.code == 200){
            this.teacherData = resData.data
            this.$message.success('获取教师成功！')
          }else {
            this.$message.error('获取教师失败！')
          }
        },
        //获取所有班级
        async queryClbum(){
          let queryData = {

          }
          let resData = await queryClbum(queryData)
          console.log('获取班级',resData)
          if(resData.code == 200){
            this.ClbumData = resData.data.list
            this.$message.success('获取班级成功！')
          }else {
            this.$message.error('获取班级失败！')
          }
        },
        //查看报名页面
        async signup(index,row){
          this.signupDig = true
          this.studentMes = row
          this.loading = true
          this.followDig = true
          let queryData = {
            unid: row.unid
          }
          let resData = await selectStudentById(queryData)
          console.log('根据unid查询学生信息', resData)
          if (resData.code == 200) {
            this.selectData = resData.data
            this.$message.success('查询成功！')
            this.realname = [this.selectData.province,this.selectData.city,this.selectData.area]
            this.loading = false
          } else {
            this.$message.error('查询失败！')
            this.loading = false
          }
        },
        //重置跟进
        restfollow(){
          followData.student_id = null
          followData.communication = null
          followData.intention = null
          followData.content = null
          followData.next_time = null
        },
        //添加联系人
        addhome(){
          this.formData.home.push({student_id:0,phone:'',parent_name:'',relation:null})
          console.log(this.formData.home)
        },
        //跟进学生信息
        async addfollow(){
          this.followData.student_id = this.studentMes.unid
          console.log(this.followData)
          let resData = await addFollow(this.followData)
          console.log(resData)
          if (resData.code == 200){
            this.$message.success('跟进成功！')
            this.followDig =false
            this.queryStudent()
          }else {
            this.$message.error('跟进失败！')
          }
        },
        //查看跟进页面
        async queryfollow(index,row){
          this.studentMes = row
          this.loading = true
          this.followDig = true
          let queryData = {
            unid: row.unid
          }
          let resData = await selectStudentById(queryData)
          console.log('根据unid查询学生信息', resData)
          if (resData.code == 200) {
            this.selectData = resData.data
            this.$message.success('查询成功！')
            this.realname = [this.selectData.province,this.selectData.city,this.selectData.area]
            this.loading = false
          } else {
            this.$message.error('查询失败！')
            this.loading = false
          }
        },
        //获取学期信息
        async querySemesterList(){
          let queryData = {}
          let resData = await querySemesterList(queryData)
          this.querySemester = resData.data
          console.log('获取学期信息',resData.data)
        },
        //查看课程信息
        async queryLessionList(){
          let queryData = {}
          let resData = await queryLessionList(queryData)
          this.queryLession = resData.data
          console.log('获取课程信息',resData.data)
        },
      //删除选中
      async delChecked(){
        for (let i = 0; i < this.checkedData.length; i++) {
          let delData = {
            unid:this.checkedData[i].unid
          }
          let resData = await delStudent(delData)
          if(resData.code == 200){
            this.$message.success('删除'+(i+1)+'条成功!')
            this.queryStudent()
          }else {
            this.$message.error('删除失败!')
          }
        }
      },
      /*表格全选方法*/
      handleSelectionChange(val) {
        console.log(val)
      },
      //查看选中的数据
      onTableSelect(rows, row, index) {
        this.checkedData = rows
      },
      //根据unid删除学生信息
      async delStudent(index, row){
        this.loading = true
        let delData = {
          unid: row.unid
        }
        let resData = await delStudent(delData)
        console.log('根据unid删除学生信息',resData)
        if (resData.code == 200){
          this.$message.success('删除成功！')
          this.loading = false
          this.queryStudent()
        }else {
          this.$message.error('删除失败！')
          this.loading = false
        }
      },
      //根据unid查看学生信息
      async selectTable(index, row) {
        this.loading = true
        this.selectTableDig = true
        console.log('index',index)
        console.log(typeof row.unid)
        console.log('学生ID', row.unid)
        let queryData = {
          unid: row.unid
        }
        let resData = await selectStudentById(queryData)
        console.log('根据unid查询学生信息', resData)
        if (resData.code == 200) {
          this.selectData = resData.data
          this.$message.success('查询成功！')
          this.realname = [this.selectData.province,this.selectData.city,this.selectData.area]
          this.loading = false
        } else {
          this.$message.error('查询失败！')
          this.loading = false
        }
      },
      //新建学生档案
      async addStudent() {
        console.log('要添加的数据', this.formData)
        let resData = await addStudent(this.formData)
        console.log('添加状态', resData)
        if (resData.code == 200) {
          this.$message.success('添加成功！')
          this.queryStudent()
        } else {
          this.$message.error('添加失败！')
        }
      },
      //分页查询
      async queryStudent() {
        this.loading = true
        this.formData.recruit[0].teacher_id = store.getters.userId
        let queryData = {
          page: this.page,
          limit: this.limit
        }
        let resData = await selectStudent(queryData)
        if (resData.code == 200) {
          for (let i = 0; i < resData.data.list.length; i++) {
            if (resData.data.list[i].follow.length != 0){
              resData.data.list[i].follow_type = 1
            }
          }
          this.queryData = resData.data.list
          this.total = resData.data.total
          console.log('查询结果', this.queryData)
          this.$message.success('查询成功！')
          this.loading = false
        } else {
          this.$message.error('查询失败！')
          this.loading = false
        }
      },
      /*每页几条*/
      handleSizeChange(val) {
        this.limit = val
        this.queryStudent()
        console.log(`每页 ${val} 条`)
      },
      /*当前页*/
      handleCurrentChange(val) {
        this.page = val
        this.queryStudent()
        console.log(`当前页: ${val}`)
      },
      /*Tabs标签页*/
      handleClick(tab, event) {
        console.log(tab, event)
      },
      /**
       * 初始化数据已选的数据
       */
      setDefaultCity() {
        // 判断是否有默认区域再判断是否开启多选
        const value = JSON.parse(JSON.stringify(this.value))
        let data = []
        if (value !== '' && typeof value === 'string') {
          if (this.props.multiple) {
            data = value.split(',').map(item => {
              return this.handleDefaultRegion(item)
            })
          } else {
            data = this.handleDefaultRegion(value)
          }
        }
        this.cityArr = data
      },
      /**
       * 字符串拆分出数组
       */
      handleDefaultRegion(value) {
        return value.split('/')
      },
      /**
       * 将数组拼接回字符串
       */
      handleRegionStr(value) {
        let str = ''
        value.forEach(item => {
          str += item + '/'
        })
        return str.slice(0, str.length - 1)
      },
      /**
       * 初始化省市区数据
       */
      init() {
        const cityData = JSON.parse(JSON.stringify(addressData)) // 避免JSON源被改变
        if (this.isAddAll) {
          cityData.unshift({ id: 0, name: '全国' }) // 插入全国选项
        }
        switch (this.optionType) {
          case 'regionData': // 省市区
            this.options = cityData
            break
          case 'provinceAndCityData': // 省市
            this.options = cityData.map(item => {
              if (item.children) {
                item.children.map(item1 => {
                  item1.children = null // 删除一个最后个区
                  return item1
                })
              }
              return item
            })
            break
          default:
            console.error('请选择正确的optionType！')
            break
        }
      },
      handleChange(event) {
        this.$emit('change', event)
        this.cityArr = event
        let str = ''
        if (this.props.multiple) { // 多选
          event.forEach(item => {
            str += this.handleRegionStr(item) + ','
          })
          str = str.slice(0, str.length - 1)
        } else {
          str = this.handleRegionStr(event)
        }
        this.isChange = true
        this.$emit('input', str)
        console.log('选中:', event)
        this.formData.province = event[0]
        this.formData.city = event[1]
        this.formData.area = event[2]
      }
    },
    created() {
      this.queryStudent()
      this.setDefaultCity()
      this.init()
      this.queryLessionList()
      this.querySemesterList()
      this.queryClbum()
      this.queryTeacher()
      this.queryPay()
      /*默认证件类型*/
      this.formData.card_type = this.cardType[0].value
    }
  }
</script>

<style scoped>
  body{
    margin: 0;
  }

  .select {
    flex-wrap: wrap;
  }

  .el-select .el-input {
    width: 130px;
  }

  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }

  .box {
    width: 100%;
    display: flex;
    flex-direction: row;
    /*//两侧对齐*/
    justify-content: space-between;
    /*//自动换行*/
    flex-wrap: wrap;
    /*//清除上下行的中间空隙*/
    align-content: flex-start;
  }

  .box_content {
    flex: 30 200px;
  }

  .box_content2{
    flex: 30 0 200px;
  }

  .box_content3{
    flex: 30 0 240px;
  }

  /*//解决最后一行的问题*/
  .box:after {
    content: '';
    width: 30%;
  }

  .btn {
    margin-bottom: 15px;
  }

  .item {
    margin-top: 10px;
    margin-right: 40px;
  }
</style>
